<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <link rel="stylesheet" href="/lib/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/commen.css"/>
    <link rel="stylesheet" href="/css/home.css"/>
    <link rel="stylesheet" href="/css/home_2.css"/>
    <link href="/css/personal-center.css" rel="stylesheet" type="text/css">
    <style>
        .btn-cancel {
            color: #fff;
            background: #F35A58;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .btn-cancelto {
            color: #fff;
            background: #F26666;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .btn-pay {
            color: #fff;
            background: #ff9600;
            padding: 2px 8px;
            border-radius: 4px;
        }
        .shop_money{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 591px;
        }
        .shop_operation{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 721px;
        }
        .shop_operation.shop_crist{
            position: absolute;
            top: 0;
            bottom: 0;
            left:841px;
        }
        .myorder_nav1 {
            width: 900px;
            margin: 10px auto;
            overflow: hidden;
            padding: 0;
        }

        .myorder_nav1 a {
            display: block;
            float: left;
            width: 120px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            color: #333333;
            text-decoration: none;
            /*border-right: 1px #D2D2D2 solid;*/
        }

        .myorder_nav1 a:last-child{
            border-right: none;
        }

        .myorder_nav1 span {
            color: #F26666;
        }

        /*.myorder_nav a:hover {*/
        /*color: #F26666;*/
        /*}*/

        .myorder_nav1 a.active {
            color: #F26666;
        }
        .collectDiv{
            width:260px;
            height:382px;
            text-align: left;
        }
        .collectPBold{
            width:100%;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 14px;
        }
        .collectP{
            width:100%;
            font-size: 14px;
            margin-bottom: 14px;
        }
         .product_style {
            width: 231px;
            height:300px;
            margin-right: 30px;
            /*border-bottom:5px solid #B9DC9D;*/
             border:2px solid transparent;
            display: inline-block;
            text-align: center;
             cursor: pointer;
             vertical-align: middle;
             overflow: hidden;
        }
         .product_style:hover{
             border:2px solid #F0F0F0;
             -webkit-box-shadow: 0px 5px 8px 5px #F8F8F8;
             -moz-box-shadow: 0px 5px 8px 5px #F8F8F8;
             -o-box-shadow: 0px 5px 8px 5px #F8F8F8;
             box-shadow: 0px 5px 8px 5px #F8F8F8;
         }


         .product_style p{
            text-align: left;
            font-size: 14px;
            /*margin-top: 48px;*/
        }
         .product_style div{
            padding-top: 17px;
            text-align: left;
            color: #F35A58;
        }

         .product_style .mask p{
            margin-top: 0px;
            width: 30px;
            color: white;
            line-height: 30px;
            background-color:#F35A58;
            /*display: none;*/
             text-align: center;
        }
        .product_style .mask .btn{
            position: relative;
            left: 146px;
            bottom: 30px;
            z-index: 10;
            width: 75px;
            color: white;
            line-height: 30px;
            background-color:#F35A58;
            display: none;
        }

        .product_style:hover .mask .btn{
            display: block;
        }
        .product_style .mask1 p{
            margin-top: 0px;
            width: 75px;
             color: white;
            line-height: 30px;
            background-color:#5195EA;
            /*display: none;*/
            text-align: center;
        }
        .productSpan{
            color: #919191;float: right;margin-right: 14px;
        }

        /*.product_style:hover .mask button {*/
            /*margin-top: 21px;*/
            /*width: 100%;*/
            /*height:43px;*/
            /*line-height: 43px;*/
            /*background-color:#FCCF7D;*/
            /*display: block;*/

        /*}*/
        .product_style .productName{
            overflow: hidden; /*自动隐藏文字*/
            text-overflow: ellipsis;/*文字隐藏后添加省略号*/
            /*max-height: 38px;*/
            width: 200px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-weight: bold;
            font-size: 16px;
        }
        /*.productImg{*/
            /*width: 160px;*/
            /*height: 160px;*/
        /*}*/
        .personal_content_center_box1{
            width:900px;
            float:left;
            margin-top: 24px;
            margin-left: 30px;
        }
        .box{
            width:160px;
            height:160px;
            max-width: 160px;
            overflow: hidden;
            position:  relative;
            /*background-color: #000000a6;*/
            margin-left: 37.5px;
        }
        .box img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 160px;
        }
    </style>
</head>
<body>
<!--top-->
<div class="commen_top">
    <div class="content clearfix">
        <div class="pull_left mall_left" id="homePage">诚惠欢迎您!</div>
        <div class="pull_right">
            <div class="top_nav pull_left">
                <a id="myCenter">我的诚惠</a>
                <a class="phone_yp">手机诚惠</a>
                <a href="" id="">帮助中心</a>
            </div>
            <div class="top_login pull_left">
                <a id="login">登录</a>
                <a id="register">注册</a>
                <span id="signName" style="display: none;cursor: pointer;"></span>
                <a id="signOut" style="display: none">退出</a>
            </div>
        </div>
    </div>
</div>
<!--advertisingimg-->
<div class="advertising content">
    <img src=" /img/Home_01.png" width="1200px">
</div>


<div class="personal_content clearfix">

    <div class="personal_content_left">
        <div class="personal_content_left_all">
            <img  id="headImg" src="/img/person.png">
            <p id="headName">花开半夏</p>
        </div>
        <a href="#" id="shopCar"><img src="/img/personal_center_05.png"/><div >我的购物车</div></a>
        <a href="#" id="order"><img src="/img/personal_center_06.png"/><div>我的订单</div></a>
        <a href="#" id="gotocollection"><img src="/img/personal_center_07-1.png"/><div style="color: #5195EA">我的收藏</div></a>
        <a href="#" id="gotoadress"><img src="/img/personal_center_08.png"/><div>我的收货地址</div></a>
        <a href="#" id="gotoasetacount"><img src="/img/personal_center_09.png"/><div>账户设置</div></a>
        <!--关于我们-->
        <div class="contact ">
            <ul class="contact_center">
                <li><span>联系</span>我们</li>
                <li>contact US</li>
                <li>加入QQ群聊:<li/>
                <li>292972004</li>
            </ul>
        </div>


    </div>
    <div class="personal_content_center_box1">
        <div class="myorder_nav1">
            <a href="#" class="itenicon" id="item" data-slide="">所有宝贝<span id="ALL">(20)</span></a>
            <a href="#" class="itenicon " data-slide="UN_PAY">降价宝贝<span id="DOWN_PRICE">(8)</span></a>
            <a href="#" class="itenicon " data-slide="WAIT_DELIVER">失效宝贝 <span id="DOWN">(8)</span></a>
            <!--<a href="#" class="itenicon " data-slide="WAIT_RECEIPT">待收货<span id="WAIT_RECEIPT">1</span></a>-->
            <!--<a href="#" class="itenicon " data-slide="WAIT_EVALUATE">待评价<span id="WAIT_EVALUATE">1</span></a>-->
        </div>

        <!--<div class="myorder_shop_nav">-->
            <!--<div class="goods_information">商品信息</div>-->
            <!--<div class="shop_price">单价</div>-->
            <!--<div class="buy_num">数量</div>-->
            <!--<div class="shop_money">实付款</div>-->
            <!--<div class="shop_operation">交易状态</div>-->
            <!--<div class="shop_operation shop_crist">交易操作</div>-->
        <!--</div>-->
        <div id="Orderlist">
            <!--<div class="collectDiv">-->
                <!--<img src="/img/Home_12.png">-->
                <!--<p class="collectPBold">小米圈铁耳机</p>-->
                <!--<p class="collectP"><span>￥60.40</span><span style="float: right">销量：31</span></p>-->
                <!--<p>小米圈铁耳机</p>-->
            <!--</div>-->
            <!--<div class="product_style">-->
                <!--<img src="/img/Home_12.png" class="productImg" >-->
                <!--<p class="productName">小米圈铁耳机Pro</p>-->
                <!--<div>¥149.00<span class="productSpan">销量：21</span></div>-->
                <!--<div class="mask">-->
                    <!--<p>新款</p>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="product_style">-->
                <!--<img src="/img/Home_12.png" class="productImg" >-->
                <!--<p class="productName">小米圈铁耳机Pro</p>-->
                <!--<div><span>¥149.00</span><span class="productSpan" >销量：21</span></div>-->
                <!--<div class="mask">-->
                    <!--<p>新款</p>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="product_style">-->
                <!--<img src="/img/Home_12.png" class="productImg" >-->
                <!--<p class="productName">小米圈铁耳机Pro</p>-->
                <!--<div>¥149.00 <span class="productSpan">销量：21</span></div>-->
                <!--<div class="mask1">-->
                    <!--<p>新款</p>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="product_style">-->
                <!--<img src="/img/Home_12.png" class="productImg" >-->
                <!--<p class="productName">小米圈铁耳机Pro</p>-->
                <!--<div>¥149.00 <span class="productSpan">销量：21</span></div>-->
                <!--<div class="mask">-->
                    <!--<p>新款</p>-->
                    <!--<p class="btn">删除</p>-->
                <!--</div>-->
            <!--</div>-->

        </div>
        <div class="shopping_empty clearfix content" id="noorder" style="display: none">
            <div class="pull_left"><img src="/img/no_collect.png"></div>
            <div class="pull_left tips">
                <p>没有收藏哦~</p>
                <a id="goOrder" style="cursor: pointer">去添加藏品>></a>
            </div>
        </div>
    </div>

</div>

<!--<div class="myorder_nav">-->
    <!--<a href="#" class="itenicon" id="item" data-slide="">所有订单<span id="ALL"></span></a>-->
    <!--<a href="#" class="itenicon " data-slide="UN_PAY">待付款<span id="UN_PAY">1</span></a>-->
    <!--<a href="#" class="itenicon " data-slide="WAIT_DELIVER">待发货 <span id="WAIT_DELIVER">1</span></a>-->
    <!--<a href="#" class="itenicon " data-slide="WAIT_RECEIPT">待收货<span id="WAIT_RECEIPT">1</span></a>-->
    <!--<a href="#" class="itenicon " data-slide="WAIT_EVALUATE">待评价<span id="WAIT_EVALUATE">1</span></a>-->
<!--</div>-->

<!--<div class="myorder_shop_nav">-->
    <!--<div class="goods_information">商品信息</div>-->
    <!--<div class="shop_price">单价</div>-->
    <!--<div class="buy_num">数量</div>-->
    <!--<div class="shop_money">实付款</div>-->
    <!--<div class="shop_operation">交易状态</div>-->
    <!--<div class="shop_operation shop_crist">交易操作</div>-->
<!--</div>-->
<!--<div id="Orderlist">-->

<!--</div>-->

<!--底部-->
<!--<div class="shopping_empty clearfix content" id="noorder" style="display: none">-->
    <!--<div class="pull_left"><img src="/pc/img/no-order.png"></div>-->
    <!--<div class="pull_left tips">-->
        <!--<p>没有待收货的订单哦~</p>-->
        <!--<a id="goOrder" style="cursor: pointer">查看全部订单>></a>-->
    <!--</div>-->
<!--</div>-->
<!--<div id="pageList" style="text-align: center;"></div>-->

<!--</div>-->
<script src="/lib/jquery-1.9.1.min.js"></script>
<script src="/lib/layui/layui.js"></script>
<script src="/lib/common.js"></script>
<script src="/lib/expand.js"></script>
<script src="/js/mycollection.js"></script>
</body>
</html>
